<template>
  <div>
    <el-container> 
	  <!-- 菜单栏 -->
	        <el-aside width="180px" style="background-color:white">
			  <div style="height:70px; text-align: center; line-height: 70px;" >
				<el-link href="" icon="el-icon-s-promotion" style="font-size:20px;">&nbsp;&nbsp;便民缴费</el-link>
			  </div>
			  
			  <el-menu>
				  
				<el-submenu index="1" @click.native="clickIndex(1)">
					<template slot="title">水费管理</template>
					<el-menu-item-group>
					  <el-menu-item index="1-1" @click.native="clickIndex(1-1)">
						  <router-link to="/Convenience_payment_water" replace tag="div">查询</router-link>
					  </el-menu-item>
					  
					 <!-- <el-menu-item index="1-2">
						  <router-link to="/Convenience_payment_water" replace tag="div">充值</router-link>
					  </el-menu-item> -->
					</el-menu-item-group>
				</el-submenu>
				
				<el-submenu index="2" @click.native="clickIndex(2)">
					<template slot="title">电费管理</template>
					<el-menu-item-group>
					  <el-menu-item index="2-1">
						  <router-link to="/Convenience_payment_electricity" replace tag="div">查询</router-link>
					  </el-menu-item>
					  
					 <!-- <el-menu-item index="2-2">
						  <router-link to="/Convenience_payment_electricity" replace tag="div">充值</router-link>
					  </el-menu-item> -->
					</el-menu-item-group>
				</el-submenu>
				
				<el-submenu index="3" @click.native="clickIndex(3)">
					<template slot="title">燃气费</template>
					<el-menu-item-group>
					  <el-menu-item index="3-1">
						  <router-link to="/Convenience_payment_naturalgas" replace tag="div">查询</router-link>
					  </el-menu-item>
					  
					  <!-- <el-menu-item index="3-2">
						  <router-link to="/Convenience_payment_naturalgas" replace tag="div">充值</router-link>
					  </el-menu-item> -->
					</el-menu-item-group>
				</el-submenu>
				
				
			  </el-menu>
		  
	     </el-aside>
			
	   <el-container>
	     <!-- 子标题栏 -->
	     <el-header style="height: 45px; background-color: #b3b3b3;text-align: center;line-height: 45px;" >
	       <strong>{{menus[this.titleIndex]}}</strong>
	     </el-header>
	     <br>
	     <!-- 显示内容 -->
	     <el-main style="background-color:antiquewhite;marrgin-top:15px">
	       <router-view></router-view>
	     </el-main>
	   		
	   </el-container>
	  
    </el-container>
	
  </div>
</template>

<script>
export default {
  data(){
    return{
      menus:['','水费','电费','燃气费','物业费'],
      titleIndex:0 ,//记录点击了哪个菜单
	  
    }
  },
  methods:{
    clickIndex(args){
      this.titleIndex = args
    },
	handleSelect: function(index){
	  // console.log(index);
	  if(index == 2){
	    this.$router.push('/servicetype')
	  }
	  if(index == 3){
	    this.$router.push('/serviceorder')
	  }
	  if(index == 4){
	    this.$router.push('/serviceall')
	  }
	  if(index == 5){
	    this.$router.push('/Convenience_payment_electricity')
	  }
	}
  }
}
</script>

<style>

</style>